<template>
  <div>
    <div class="breadcrumb">
      <router-link class="shouye" to="/home">首页 / </router-link>
      <router-link class="xinxi" to="/gonggao">信息公告 / </router-link>
      <div class="xiangqing">信息公告详情页</div>
    </div>
    <div class="table-container">
      <h2>{{ gonggao.name }}</h2>
        <div class="info-header">
          <div>
            <h1>古浪-河口天然气联络管道工程施工第二标段位于甘肃省兰州市永登县、西固区境内</h1>
          </div>
          <div>
            <span>发布时间：2024 年 04 月 13 日</span>
          </div>
        </div>
        <div>
          <img src="../images/违规投诉详情页/u1685.png" style="width: 1100px;height: 575px;">
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Xiangqing',
  data() {
    return {
      gonggao: {
        }
      }
    }
  }

</script>

<style scoped>
.table-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #dddddd;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 50px
}

.breadcrumb {
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 14px;
  color: #888;
  text-align: left;
  margin-top: 30px;
  display: flex;
}

.breadcrumb .xinxi {
  color: #888;
  text-decoration: none;
  margin-top: 30px;
}

.breadcrumb .xiangqing {
  color: black;
  margin-top: 30px;
}

.breadcrumb .shouye {
  color: #888;
  text-decoration: none;
  margin-top: 30px;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.info-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.info-header span {
  margin-right: 10px; /* 可以根据需要调整间距 */
}
.fujian{
  display: flex;
  justify-content: center;
  align-items: center; 
  margin-right:400px;
  margin-top:30px;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.info-table th,
.info-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.info-table th {
  background-color: #f2f2f2;
}

.contact-info {
  margin-top: 10px;
}

.contact-info p {
  margin: 5px 0;
}
</style>
